<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    var NoLink = React.createClass({
        getInitialState: function() {
            return {message: 'Hello!'};
        },
        handleChange: function(event) {
            this.setState({message: event.target.value});
        },
        render: function() {
            var message = this.state.message;
            return <input type="text" value={message} onChange={this.handleChange} />;
        }
    });

    var WithLink = React.createClass({
        mixins: [React.LinkedStateMixin],
        getInitialState: function() {
            return {message: 'Hello!'};
        },
        render: function() {
            return <input type="text" valueLink={this.linkState('message')} />;
        }
    });

    var WithoutMixin = React.createClass({
        getInitialState: function() {
            return {message: 'Hello!'};
        },
        handleChange: function(newValue) {
            this.setState({message: newValue});
        },
        render: function() {
            var valueLink = {
                value: this.state.message,
                requestChange: this.handleChange
            };
            return <input type="text" valueLink={valueLink} />;
        }
    });

    var WithoutLink = createReactClass({
        mixins: [React.LinkedStateMixin],
        getInitialState: function() {
            return {message: 'Hello!'};
        },
        render: function() {
            var valueLink = this.linkState('message');
            var handleChange = function(e) {
                valueLink.requestChange(e.target.value);
            };
            return <input type="text" value={valueLink.value} onChange={handleChange} />;
        }
    });


    ReactDOM.render(
        <div>
            <NoLink />
            <WithLink />
            <WithoutMixin />
            <WithoutLink />

        </div>,
        document.getElementById("example")
    );


</script>
</body>
</html>

